<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>KINEPOLIS - Projet 2013</title>
	<!-- stylesheets  onglet connection-->
	<link rel="stylesheet" href="Css/style.css" type="text/css" media="screen" /> 
	<link rel="stylesheet" href="Css/slide.css" type="text/css" media="screen" />
	
	  	<!-- PNG FIX for IE6 -->
	  	<!-- http://24ways.org/2007/supersleight-transparent-png-in-ie6 -->
		<!--[if lte IE 6]>
			<script type="text/javascript" src="js/pngfix/supersleight-min.js"></script>
		<![endif]-->
		 
	    <!-- jQuery - the core -->
	<!-- jQuery - the core (onglet connection) -->
	<script src="Script/jquery-1.3.2.min.js" type="text/javascript"></script>
	<!-- Sliding effect (onglet connection) -->
	<script src="Script/slide.js" type="text/javascript"></script>
	<script type="text/javascript" src="Script/jquery.js"></script>
	<script type="text/javascript" src="Script/slider.js"></script>
	<script type="text/javascript" src="Script/jquery-easing-1.3.pack.js"></script>
	<script type="text/javascript" src="Script/jquery-easing-compatibility.1.2.pack.js"></script>
	<script type="text/javascript" src="Script/jquery.kwicks-1.5.1.pack.js"></script>
	<script type="text/javascript">
	$().ready(function() {
		$('.jimgMenu ul').kwicks({max: 310, duration: 300, easing: 'easeOutQuad'});
		});
	</script>
	<script type="text/javascript">
	jQuery('#preview_mail').load(function() {
	 var tag = jQuery(this);
	 var final_height = tag.contents().height();
	 tag.attr('height', final_height);
	});
	</script>
	<script type="text/javascript">
	$(document).ready(function() {
		if(document.getElementById('j_idt3:connectionStatut').value == "false")
		{
			document.getElementById('info1').style.display = "block";
			document.getElementById('info1').style.visibility = "visible";
			document.getElementById('info2').style.display = "block";
			document.getElementById('info2').style.visibility = "visible";
			document.getElementById('info3').style.display = "block";
			document.getElementById('info3').style.visibility = "visible";
			document.getElementById('info4').style.visibility = "hidden";
			document.getElementById('menuAdmin').style.visibility = "hidden";
		}
		else
		{
			document.getElementById('info1').style.visibility = "hidden";
			document.getElementById('info1').style.display = "none";
			document.getElementById('info2').style.visibility = "hidden";
			document.getElementById('info2').style.display = "none";
			document.getElementById('info3').style.visibility = "hidden";
			document.getElementById('info3').style.display = "none";
			document.getElementById('info4').style.visibility = "visible";
			if(document.getElementById('j_idt3:connectionAdmin').value == "true")
			{
				document.getElementById('menuAdmin').style.visibility = "visible";
			}
		}
	});
	</script>
	<style type="text/css"> 
			#lien-bouton{ 
			   color:grey; 
			   font-family:verdana; 
			   font-size:12px; 
			   padding:5px 20px; 
			   text-decoration:none; 
			   background-image:url(degrade.png); 
			   background-repeat:repaet-x; 
			   background-position:top; 
			   border:solid 1px grey; 
			   border-radius:5px; 
			} 
			#lien-bouton:hover{ 
			   background-position:bottom; 
			   border:solid 1px black; 
			   color:black; 
			} 
	</style> 
</head>

<body>
<!-- Panel -->
		<div class="header">
			<img class="logo" src="images/logo.png"/>
		</div>
		<div id="toppanel">
			<div id="panel">
				<div class="content clearfix">
					<div class="left" id ="info1" style="visibility:visible">
						<h1>Bienvenue sur l'onglet de connection du site web de Kinepolis</h1>
						<h2>Se connecter ou s'enregistrer</h2>
						<p class="grey">En tant que membre du site web de Kinepolis, il vous sera possible de réserver vos places en ligne</p>
					</div>
                   	<div class="left" id = "info2" style="visibility:visible">
						  <h:form>
							<h1>Connection membre</h1>
							<label class="grey" for="log">Nom d'utilisateur:</label>
							<h:inputText class="field" value="#{subscriberManagedBean.abonnee.login}" />
							<label class="grey" for="pwd">Mot de passe:</label>
							<h:inputText class="field" value="#{subscriberManagedBean.mdp}" />
							<label><input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever" /> &nbsp;Se souvenir</label>
							<div class="clear"></div>
							<h:commandButton styleClass="bt_login" value="Login" action="#{subscriberManagedBean.Connexion}" />	
							<h:inputHidden id="connectionStatut" value="#{subscriberManagedBean.connecter}" />
							<h:inputHidden id="connectionAdmin" value="#{subscriberManagedBean.admin}" />		
							<a class="lost-pwd" href="#">Mot de passe perdu? </a>
						</h:form>
					</div>
					<div class="left right" id="info3" style="visibility:visible">			
								<!-- FORMULAIRE D'ENREGISTREMENT -->
								<h:form>
									<h1>Pas encore membre? Inscrivez-vous!</h1>				
									<label class="grey" for="signup">Nom d'utilisateur:</label>
									<h:inputText class="field" value="#{subscriberManagedBean.abonnee.login}" />
									<label class="grey" for="email">Mot de passe:</label>
									<h:inputText class="field" value="#{subscriberManagedBean.mdp}" />
									<label class="grey" for="email">Confirmation du mot de passe:</label>
									<h:inputText class="field" value="#{subscriberManagedBean.mdpConfirm}" />
																							      
									<h:commandButton styleClass="bt_register" value="S'enregistrer" action="#{subscriberManagedBean.CreateAccount}" onclick="javascript:popup('Compte créé')" />								
								</h:form>	
					</div>
					
					<div class="left right" id="info4" style="visibility:hidden">
						<h:form>
						  <h:commandButton styleClass="bt_register" value="Deconnection" action="#{subscriberManagedBean.deconnection}" />
						</h:form>
					</div>
					
					<!--BOUTON D'ADMINISTRATION DU SITE SI LE USER CONNECTER == ADMIN  -->
					<div class="left right" id="menuAdmin" style="visibility: hidden">
						<a id="lien-bouton" href="AdminPages/index.xhtml">Administration</a> 
					</div>
					 
								 
								 
					
												
						
				</div>
			</div> <!-- /login -->	
		
		<!-- The tab on top -->	
			<div class="tab">
				<ul class="login">
					<li class="left">&nbsp;</li>
					<li>Hello #{subscriberManagedBean.userCourant.login}</li>
					<li class="sep">|</li>
					<li id="toggle">
						<a id="open" class="open" href="#">login | register</a>
						<a id="close" style="display: none;" class="close" href="#">Fermer la fenêtre</a>
						
					</li>
					<li class="right">&nbsp;</li>
				</ul> 
			</div> <!-- / top -->
			
		</div> <!--panel -->
		<div id="container" class="containeur">
			<div id="header">
			</div>

			<div id="button">
				<img id="home" src="images/home.png" width="184" height="32" class="menu_class"></img>
					<ul id="titre1" class="the_menu">
						<li><a onclick='$("iframe").attr("src","accueil.xhtml")'>Page d'accueil</a></li>
						<li><a onclick='$("iframe").attr("src","infocine.xhtml")'>Infos cinéma</a></li>
						<li><a onclick='$("iframe").attr("src","aPropos.xhtml")'>A Propos</a></li>
					</ul>
			</div>
			<div id="button">
				<img id="film" src="images/film.png" width="184" height="32" class="menu_class"></img>
					<ul id="titre2" class="the_menu">
						<li><a onclick='$("iframe").attr("src","horaires.xhtml")'>horaires</a></li>
						<li><a onclick='$("iframe").attr("src","accueil.xhtml")'>Nouveautés</a></li>
					</ul>
			</div>
		
		</div>
		<div> 
  			<iframe id="iframeindex" src="accueil.xhtml" scrolling="no"></iframe>
		</div>



</body>
</html>